<ion-view title="{{department.name}}详情" show-tabs>
  <ion-nav-buttons side="right">
    <button class="button button-icon ion-ios-trash-outline margin-right" ng-click="delete()" ng-if="!department.children"></button>
    
    <button class="button" ng-class="{'button-icon ion-ios-compose-outline':!$root.isEdit,'button-clear':$root.isEdit}" ng-click="$root.toggleEdit()"><span ng-if="$root.isEdit">取消</span></button>
  </ion-nav-buttons>

  <ion-content class="has-header wrap-light2">
    <form name="deptForm" ng-submit="$root.toggleEdit();update();" novalidate>
      <ion-list>

        <ion-item class="item-base">
          <span class="list-label text-right">部门名称</span>
          <span>{{department.name}}</span>
          <span class="item-note">{{department.type}}</span>
        </ion-item>

        <ion-item class="radio-group" ng-if="$root.isEdit">
          <span class="list-label text-right">状态</span>
          <ion-radio ng-model="department.state" ng-value="'启用'" class="radio-royal">启用</ion-radio>
          <ion-radio ng-model="department.state" ng-value="'锁定'" class="radio-royal">锁定</ion-radio>
          <ion-radio ng-model="department.state" ng-value="'停用'" class="radio-royal">停用</ion-radio>
        </ion-item>

        <ion-item class="item-base" ng-if="department.state && !$root.isEdit">
          <span class="list-label text-right">状态</span>
          <span>{{department.state}}</span>
        </ion-item>

        <ion-item class="item-input" ng-if="!department.is_collection && $root.isEdit">
          <span class="list-label text-right">地址</span>
          <input type="text" name="province" maxlength="10" required placeholder="省" ng-model="department.address.province" />
          <input type="text" name="city" maxlength="10" required placeholder="市" ng-model="department.address.city" />
          <input type="text" name="region" maxlength="10" required placeholder="区" ng-model="department.address.region" />
        </ion-item>
        <ion-item class="item-input item-borderless item-icon-right" ng-if="!department.is_collection && $root.isEdit">
          <span class="list-label"> </span>
          <input type="text" name="street" maxlength="50" required placeholder="详细地址" ng-model="department.address.street" />
        </ion-item>
        
        <ion-item class="item-base item-icon-right" ng-if="department.address && !$root.isEdit">
          <span class="list-label text-right">地址</span>
          <span>{{department.address.province}}</span>
          <span>{{department.address.city}}</span>
          <span>{{department.address.region}}</span>
          <span>{{department.address.street}}</span>
        </ion-item>

        <ion-item class="item-input light-bg" ng-if="department.remark || $root.isEdit">
          <span class="list-label text-right">备注</span>
          <textarea rows="3" ng-model="department.remark" ng-readonly="!$root.isEdit"></textarea>
        </ion-item>
        <button class="button button-block button-balanced" ng-show="$root.isEdit" type="submit">保存</button>
      </ion-list>
    </form>

    <div ng-if="!$root.isEdit">
      <ion-item class="item-base item-icon-left margin-top-large" ui-sref="app.dept-add({'parent_id': department._id})" ng-if="!deptTree.length && department.type!='柜组'">
        <i class="icon ion-plus dark2"></i>新增下属部门
      </ion-item>
      <div ng-if="deptTree.length">
        <ion-item class="item-base item-button-right margin-top-large">
          <b>下属部门</b>
          <a class="button button-col" ui-sref="app.dept-add({'parent_id': department._id})">
            <i class="icon ion-plus dark2 margin-right-small"></i>新增
          </a>
        </ion-item>
        <tree-view
          recursion-template='templates/common/model/list-tree.html',
          tree-data="deptTree" 
          text-field="name" 
          leaf-icon="ion-link" 
          pre-href="department" 
          value-field='_id' 
          item-clicked="itemClicked($item)" 
          item-checked-changed="itemCheckedChanged($item)" 
          expend-all="expendAll(treeData)">
        </tree-view>
      </div>

      <ion-item class="item-base item-icon-left margin-top-large" ui-sref="app.employee-add({'dept_id': department._id})" ng-if="!deptUsers.length">
        <i class="icon ion-plus dark2"></i>添加员工
      </ion-item>

      <div ng-if="deptUsers.length">
        <ion-item class="item-base item-button-right margin-top-large">
          部门成员
          <a class="button button-col royal" ui-sref="app.employee-add">
            <i class=" ion-plus icon-left"></i>添加
          </a>
        </ion-item>

        <div class="item">
          <div class="row row-nopadding text-center light-bg">
            <div class="col royal">员工</div>
            <div class="col royal">职位</div>
            <div class="col royal">账号</div>
          </div>
        </div>
        <ion-item ng-repeat="deptUser in deptUsers" href="#/employee-{{deptUser._id}}">
          <div class="row row-nopadding text-center">
            <div class="col">{{deptUser.profile.name}}</div>
            <div class="col">{{deptUser.profile.roleName}}</div>
            <div class="col"><span ng-if="deptUser.state!='未启用'">{{deptUser.username}}</span><span ng-if="deptUser.state=='未启用'" class="assertive">未启用</span></div>
          </div>
        </ion-item>
      </div>
    </div>
  </ion-content>
</ion-view>
